<template>
  <div class="hello">
    <div id="main"></div>
  </div>
</template>

<script>
import map from "../utils/map.json";
export default {
  name: "HelloWorld",
  mounted: function () {
    // 基于准备好的dom，初始化echarts实例
    this.$echarts.registerMap("china", { geoJSON: map });
    var myChart = this.$echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts",
      },
      geo: {
        map: "china",
        roam: true,
        itemStyle: {
          borderColor: "#000000",
        },
      },
      series: [
        {
          name: "区域分布",
          type: "effectScatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            brushType: "stroke",
          },
          legendHoverLink: true,
          effectType: "ripple",
          showEffectOn: "render",
          symbolSize: 10,
          showEffectOn: "render",
          itemStyle: {
            color: "#000000",
          },
          data: [
            [113.596381, 39.409915],
            [95.806195, 36.303678],
          ],
        },
        {
          name: "区域定位",
          type: "scatter",
          coordinateSystem: "geo",
          emphasis: {
            scale: true,
          },
          symbol:
            "image://https://img1.baidu.com/it/u=2280402899,3367702343&fm=26&fmt=auto",
          symbolSize: 30,
          data: [
            [87.932152, 41.807176],
            [111.775049, 28.25052],
          ],
        },
        {
          name: "Route",
          type: "lines",
          coordinateSystem: "geo",
          geoIndex: 0,
          emphasis: {
            label: {
              show: false,
            },
          },
          polyline: true,
          lineStyle: {
            color: "#c46e54",
            width: 5,
            opacity: 1,
            type: "dotted",
          },
          effect: {
            show: true,
            period: 8,
            color: "#a10000",
            // constantSpeed: 80,
            trailLength: 0,
            symbolSize: [12, 30],
            symbol:
              "path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z",
          },
          z: 100,
          data: [
            {
              effect: {
                color: "#a10000",
                constantSpeed: 100,
                delay: 0,
              },
              coords: [
                [92.384298, 40.780408],
                [100.883849, 40.50011],
                [107.102136, 40.808372],
                [114.019519, 41.365167],
                [115.20787, 38.572229],
                [109.28394, 35.173564],
                [103.470394, 31.467712],
                [102.145789, 26.619792],
                [93.830211, 30.548594],
              ],
            },
          ],
        },
      ],
      legend: {
        type: "plain",
        show: true,
        orient: "vertical",
        top: "middle",
        left: "left",
        data: [
          {
            name: "区域分布",
            icon: "circle",
            textStyle: {
              color: "#000000",
            },
          },
          {
            name: "区域定位",
            icon: "image://https://img1.baidu.com/it/u=2280402899,3367702343&fm=26&fmt=auto",
            textStyle: {
              color: "#000000",
            },
          },
        ],
      },
    });
    myChart.on("click", function (params) {
      console.log(params);
    });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#main {
  width: 1500px;
  height: 800px;
}
</style>
